<template>
  <view class="section" v-if="wordData">
    <view class="content">
      <view class="info">
        <view class="info_content">
          <view class="info_title"> 词根助记 </view>
          <view class="info_box">
            <view class="root" v-if="wordData.wordRootList.length > 0">
              <view class="root_content">
                <view
                  class="root_item"
                  v-for="(item, index) in wordData.wordRootList"
                  :key="index"
                >
                  <view class="root_box">
                    <view class="root_name"> {{ item.name }} </view>
                    <view class="root_text"> {{ item.parse }} </view>
                  </view>
                  <view
                    class="root_symbol"
                    v-if="index < wordData.wordRootList.length - 1"
                  >
                    +
                  </view>
                </view>
                <view class="root_item">
                  <view class="root_symbol"> = </view>
                  <view class="root_box all">
                    <view class="root_name"> {{ wordData.word }} </view>
                    <view class="root_text">
                      {{ wordData.wordParaphrase }}
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="info_content">
          <view class="info_title"> 实用口语 </view>
          <view class="info_box">
            <view class="sentence">
              <view class="sentence_title">
                {{ wordData.sentence.sentenceEnglish }}
              </view>
              <view class="sentence_text">
                {{ wordData.sentence.sentenceChinese }}
              </view>
              <view class="sentence_icon">
                <view @click="play(1)">
                  <image
                    style="width: 22rpx"
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/fayin.png"
                    mode="widthFix"
                  />
                </view>
                <view @click="play(0.8)">
                  <image
                    style="width: 27rpx"
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/man.png"
                    mode="widthFix"
                  />
                </view>
                <view @click="evaluation()">
                  <image
                    style="width: 28rpx"
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/word/luyin.png"
                    mode="widthFix"
                  />
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="btn">
        <view class="btn_content" @click="handleOpenPopup('1')">
          <text>自然拼读</text>
        </view>
        <view class="btn_content" @click="handleOpenPopup('2')">
          <text>拆分发音</text>
        </view>
      </view>
    </view>
    <SentenceReadingEvaluation
      ref="SentenceReadingEvaluation"
      :sentenceInfo="sentenceInfo"
    ></SentenceReadingEvaluation>
    <PhonicsPopup ref="PhonicsPopup" :wordData="wordData"></PhonicsPopup>
    <SplitPronunciationPopup
      ref="SplitPronunciationPopup"
      :wordData="wordData"
    ></SplitPronunciationPopup>
  </view>
</template>

<script>
import PhonicsPopup from "./PhonicsPopup.vue";
import SplitPronunciationPopup from "./SplitPronunciationPopup.vue";
import SentenceReadingEvaluation from "./SentenceReadingEvaluation.vue";

const englishAudioContext = uni.createInnerAudioContext();
englishAudioContext.autoplay = true;
export default {
  components: {
    PhonicsPopup,
    SplitPronunciationPopup,
    SentenceReadingEvaluation,
  },
  props: {
    wordData: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      sentenceInfo: {},
    };
  },
  mounted() {},
  methods: {
    evaluation() {
      this.sentenceInfo = this.wordData.sentence;
      this.$refs.SentenceReadingEvaluation.open();
    },
    play(speed) {
      if (!englishAudioContext.paused) return;
      englishAudioContext.src = this.wordData.sentence.sentenceAudio;
      englishAudioContext.playbackRate = speed;
      englishAudioContext.play();
    },
    handleOpenPopup(type) {
      if (type === "1") {
        this.$refs.PhonicsPopup.open();
      } else if (type === "2") {
        this.$refs.SplitPronunciationPopup.open();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./WordStep1";
</style>
